<template>
  <common :show-search="true" title="新闻NEWS">
    <div class="marketNews">
      <article class="newsContainer">
        <ul class="newsContent">
          <li class="newsList" v-for="(item, index) in mkNews" :key="index">
            <span>{{item.publishTime}}</span>
            <span>{{item.subTypeName}}</span>
            <span @click.stop="watchNews(item.id)">{{item.title}}</span>
          </li>
        </ul>
      </article>
    </div>
    <pc-dialog v-if="newsDialog" :title="'新闻详情'" customStyle="width: 800px; height: 680px"  @cancel="newsDialog = false" >
      <detail-news :newsContent="newsContent"  />
    </pc-dialog>
  </common>
</template>
<script>
import Common from './common.vue';
import PcDialog from '../../../components/dialog/newsCenterDalog';
import DetailNews from '../home/detailNews';
export default {
  data () {
    return {
      newsDialog: false,
      newsContent: '',
      mkNews: []
    };
  },
  beforeMount () {
    let data = {
      mainLevelCode: '',
      mainProductName: '',
      title: ''
    };
    this.reqMkNews(data);
  },
  methods: {
    watchNews (id) {
      console.log(id, 'ddds');
      this.reqDetailNews(id);
      this.newsDialog = true;
    },
    reqMkNews (data) {
      this.ajax({
        type: 'POST',
        url: 'malisk/client/market/newsList',
        data: data,
        success: res => {
          setTimeout(() => {
            this.$pcNProgress.done();
          }, 300);
          if (res.code === 200) {
            // this.$store.dispatch(' ', res.result);
            this.mkNews = res.result;
          } else {
            this.errorTip(res.message);
          }
        }
      });
    },
    reqDetailNews (id) {
      let _this = this;
      this.ajax({
        type: 'GET',
        url: `malisk/client/market/newsDetail/${id}`,
        success: res => {
          setTimeout(() => {
            this.$pcNProgress.done();
          }, 300);
          if (res.code === 200) {
            _this.newsContent = res.result.content.replace(/\\/g, '').replace(/<img/g, '<img style="max-width:100%;height:auto;"');
          } else {
            _this.errorTip(res.message);
          }
        }
      });
    }
  },
  components: {
    Common,
    PcDialog,
    DetailNews
  }
};
</script>
<style lang="less" rel="stylesheet/less" scoped>
  .marketNews{
    width: 760px;
    height: 130px;
    border: 1px solid #303541;
    .newsContainer{
      height: 110px;
      width: 720px;
      margin: 20px;
      overflow: hidden;
      .newsContent{
        height: 90px;
        overflow-y: auto;
        .newsList{
          margin-bottom: 12px;
          span{
            display: inline-block;
            &:nth-child(1){
              width: 150px;
            }
            &:nth-child(2){
              width: 100px;
            }
          }
        }
      }

    }
  }
</style>
